<template>
  <div class="contentbox">
    <div class="box">
      <div class="topbox">
        <div class="topLeft">意向标签</div>
      </div>
      <dk-divider style="margin: 20px"></dk-divider>
      <div class="centerbox">
        <div class="formbox">
          <t-form
            v-show="!isFold"
            ref="form"
            :rules="FORM_RULES"
            :data="formData"
            :layout="'inline'"
            scroll-to-first-error="smooth"
            :class="isFold ? '' : 'paddingBottom'"
            labelAlign="right"
          >
            <t-form-item label="知识点" name="knowledge" :label-width="0">
              可拖拽调整意向标签的优先级顺序
            </t-form-item>

            <t-form-item class="formHandleBox" v-if="!isFold" :label-width="0">
              <t-space size="small" style="gap: 10px; width: 90px">
                <dk-button @click="handleReset">添加规则</dk-button>
              </t-space>
            </t-form-item>
          </t-form>
        </div>
        <div class="tableBox">
          <t-table
            row-key="index"
            :pagination="pagination"
            :columns="columns"
            :data="data"
            drag-sort="row"
            lazy-load
            @drag-sort="onDragSort"
            :reserve-selected-row-on-paginate="false"
            :editable-row-keys="editableRowKeys"
            :defaultSelectedRowKeys="selectedRowKeys"
            @select-change="rehandleSelectChange"
          ></t-table>
        </div>
      </div>
    </div>
  </div>
  <addknowledge :isshow="isshow" @event="close"></addknowledge>
</template>
  
  <script setup lang="jsx">
  import { reactive, ref, watchEffect } from 'vue';
  import { MessagePlugin } from 'tdesign-vue-next';
  import addknowledge from './components/addknowledge.vue';
  import { initialColumns } from './formcolumn/knowledgeBase';
  
  // 新增知识点弹窗开关
  const isshow = ref(false);

  // form 表单
  const formData = reactive({
      knowledge: '', //知识点
      answer: '', //答案
      keyword: '' //关键词
  });
  
  const editableRowKeys = ref(['1']);
  
  const selectedRowKeys = ref([]); //选中行数组
  const rehandleSelectChange = (value, ctx) => {
      //全选事件
      selectedRowKeys.value = value;
      // selectedRowKeys.value = [...selectedRowKeys.value, ...value];
      console.log(value, ctx);
      // console.log(selectedRowKeys.value);
  };
  // 批量按钮的开关
  const disbatchsize = ref(true);
  // 表格操作列
  const columnsobj = ref({
      colKey: 'operation',
      title: '操作',
      fixed: 'right',
      width: '164',
      align: 'center',
      cell: (h, { row }) => {
          // const editable = editableRowKeys.value.includes(row.key);
          return (
              <div class="table-operations">
                  {
                      <dk-button type="primary" hover="color" data-id={row.key} onClick={() => onEdit(row)}>
                          编辑
                      </dk-button>
                  }
                  {
                      <dk-button style="margin-left: 10px" type="warning" hover="color" data-id={row.key} onClick={ondelete}>
                          删除
                      </dk-button>
                  }
              </div>
          );
      }
  });
  const columns = ref([...initialColumns, columnsobj.value]);
  
  // 表格数据
  const data = ref([
      {
          index: 1,
          applicant: '1',
          colanswer: '电子签签署签署签署署',
          colknowledge: '宣传物料制作费用',
          colkeyword: '2022-01-01'
      },
      {
          index: 2,
          applicant: '2',
          colanswer: '签署签署签署签署签署签署签署签署签署签署签署签署签署',
          colknowledge: '宣传',
          colkeyword: '2022-01-01'
      }
  ]);
  
  // 分页
  const pagination = reactive({
      //   current: 2,
      //   pageSize: 5,
      defaultCurrent: 1,
      defaultPageSize: 5,
      total: data.value.length,
      // showJumper: true,
      showPageSize: true
  });
  
  // 编辑
  const onEdit = (e) => {
      // 切换按钮 比如改变一个状态后 出现新的按钮 此按钮消失
      //   const { id } = e.currentTarget.dataset;
      //   if (!editableRowKeys.value.includes(id)) {
      //     editableRowKeys.value.push(id);
      //   }
      console.log('编辑', e);
  };
  
  // 删除
  const ondelete = (e) => {
      // 切换按钮 比如改变一个状态后 出现新的按钮 此按钮消失
      //   const { id } = e.currentTarget.dataset;
      //   if (!editableRowKeys.value.includes(id)) {
      //     editableRowKeys.value.push(id);
      //   }
      console.log('删除');
  };
  
  // 打开新增弹窗
  const handleReset = () => {
      isshow.value = true;
  };
  // 关闭新增弹窗
  const close = (val) => {
      isshow.value = val;
  };
  
  watchEffect(() => {
      selectedRowKeys.value.length > 0 ? (disbatchsize.value = false) : (disbatchsize.value = true);
  });
  
//   // currentData is going to be deprecated
//   const onDragSort = ({ currentIndex, targetIndex, current, target, data, newData, e, sort }) => {
//       console.log('交换行', currentIndex, targetIndex, current, target, data, newData, e, sort);
//       if (sort === 'col') {
//           columns.value = newData;
//       }
//   };
  // currentData is going to be deprecated
  const onDragSort = (params) => {
  console.log('交换行', params);
  data.value = params.newData;
};
  </script>
  
  <style lang="scss" scoped>
.contentbox {
  width: 100%;
  height: 100%;
  background-color: rgb(231, 231, 232);
  padding: 8px;
  display: flex;
  justify-content: space-between;

  .box {
    // width: 100%;
    // height: 100%;
    background-color: #fff;
    // height: 65px;
    padding: 20px 20px 17px 20px;
    border-radius: 8px;

    .topbox {
      font-size: 16px;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
      display: flex;
    }
    .centerbox {
      // padding: 20px 0;
      .tableBox {
        margin-top: 30px;
        .topbuttons {
          display: flex;
          margin-bottom: 2px;
          .dk-button {
            margin-left: 10px;
          }
        }
      }
    }
  }
}
.formHandleBox {
  margin: 0;
}
.buttonbut {
  display: flex;
  justify-content: flex-end;
}
:deep(.t-pagination .t-pagination__select) {
  position: relative;
  height: 28px !important;
}
:deep(.t-form-inline .t-form__item) {
  min-width: 60px !important;
}
:deep(.t-form-inline) {
  justify-content: space-between;
}
</style>
  